/*
 * @Description: 
 * @Author: paddies
 * @Date: 2024-11-28 14:18:36
 * @LastEditors: paddies
 * @LastEditTime: 2024-11-28 16:06:17
 * @FilePath: /shared_components/lib/luntai-components/statistics-page/statisticsPage.dart
 */
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:shared_components/build-common/buildCommon.dart';
import 'package:shared_components/build-image/buildImage.dart';
import 'package:shared_components/luntai-components/statistics-page/controller.dart';

class StatisticsPage extends StatefulWidget {
  const StatisticsPage({super.key});

  @override
  State<StatisticsPage> createState() => _StatisticsPageState();
}

class _StatisticsPageState extends State<StatisticsPage> {
  final StatisticsPageController controller =
      Get.put(StatisticsPageController());
  @override
  Widget build(BuildContext context) {
    var screenTopHeight = MediaQuery.of(context).padding.top;
    var screenBottomHeight = MediaQuery.of(context).padding.bottom;

    var activeColor = Color(0xffe43628);
    var defaultColor = Color(0xff282828);
    var activeBgColor = Color(0xfff7ebe9);
    var defaultBgColor = Colors.white;

    return Obx(() => Container(
        width: double.infinity,
        height: double.infinity,
        color: Color(0xfff8f8f8),
        child: Column(children: [
          Container(
            width: double.infinity,
            height: screenTopHeight,
            // color: Colors.red,
          ),
          Container(
            width: double.infinity,
            height: 50,
            // color: Colors.green,
            child: Row(
              children: [
                GestureDetector(
                  onTap: () {
                    Get.back();
                  },
                  child: Container(
                    width: 80,
                    height: double.infinity,
                    // color: Colors.red,
                    alignment: Alignment.center,
                    child: const Icon(
                      Icons.chevron_left_rounded,
                      size: 30,
                    ),
                  ),
                ),
                Expanded(
                    child: Container(
                  width: double.infinity,
                  height: double.infinity,
                  alignment: Alignment.center,
                  child: const Text(
                    "统计",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  // color: Colors.teal,

                  // child: ,
                )),
                Container(
                  width: 80,
                  height: double.infinity,
                  // color: Colors.red,
                  alignment: Alignment.center,
                )
              ],
            ),
          ),
          Container(
            width: double.infinity,
            height: 40,
            color: Colors.transparent,
            child: Row(
              children: [
                Expanded(
                    child: Padding(
                  padding:
                      EdgeInsets.only(top: 2, bottom: 2, left: 4, right: 4),
                  child: GestureDetector(
                    onTap: () {
                      controller.state.activeTab.value = 'niangdu';
                    },
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: controller.state.activeTab.value == 'niangdu'
                              ? activeBgColor
                              : defaultBgColor,
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      padding: EdgeInsets.all(8),
                      child: Text(
                        "年度",
                        style: TextStyle(
                          color: controller.state.activeTab.value == 'niangdu'
                              ? activeColor
                              : defaultColor,
                        ),
                      ),
                    ),
                  ),
                )),
                Expanded(
                    child: Padding(
                  padding:
                      EdgeInsets.only(top: 2, bottom: 2, left: 4, right: 4),
                  child: GestureDetector(
                    onTap: () {
                      controller.state.activeTab.value = 'jidu';
                    },
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: controller.state.activeTab.value == 'jidu'
                              ? activeBgColor
                              : defaultBgColor,
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      padding: EdgeInsets.all(8),
                      child: Text(
                        "季度",
                        style: TextStyle(
                          color: controller.state.activeTab.value == 'jidu'
                              ? activeColor
                              : defaultColor,
                        ),
                      ),
                    ),
                  ),
                )),
                Expanded(
                    child: Padding(
                  padding:
                      EdgeInsets.only(top: 2, bottom: 2, left: 4, right: 4),
                  child: GestureDetector(
                    onTap: () {
                      controller.state.activeTab.value = 'yuedu';
                    },
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: controller.state.activeTab.value == 'yuedu'
                              ? activeBgColor
                              : defaultBgColor,
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      padding: EdgeInsets.all(8),
                      child: Text(
                        "月度",
                        style: TextStyle(
                          color: controller.state.activeTab.value == 'yuedu'
                              ? activeColor
                              : defaultColor,
                        ),
                      ),
                    ),
                  ),
                )),
                Expanded(
                    child: Padding(
                  padding:
                      EdgeInsets.only(top: 2, bottom: 2, left: 4, right: 4),
                  child: GestureDetector(
                    onTap: () {
                      controller.state.activeTab.value = 'benzhou';
                    },
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: controller.state.activeTab.value == 'benzhou'
                              ? activeBgColor
                              : defaultBgColor,
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      padding: EdgeInsets.all(8),
                      child: Text(
                        "本周",
                        style: TextStyle(
                          color: controller.state.activeTab.value == 'benzhou'
                              ? activeColor
                              : defaultColor,
                        ),
                      ),
                    ),
                  ),
                )),
                Expanded(
                    child: Padding(
                  padding:
                      EdgeInsets.only(top: 2, bottom: 2, left: 4, right: 4),
                  child: GestureDetector(
                    onTap: () {
                      controller.state.activeTab.value = 'zidingyi';
                    },
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: controller.state.activeTab.value == 'zidingyi'
                              ? activeBgColor
                              : defaultBgColor,
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      padding: EdgeInsets.all(8),
                      child: Text(
                        "自定义",
                        style: TextStyle(
                          color: controller.state.activeTab.value == 'zidingyi'
                              ? activeColor
                              : defaultColor,
                        ),
                      ),
                    ),
                  ),
                )),
              ],
            ),
          ),
          Container(
            width: double.infinity,
            height: 100,
            color: Colors.transparent,
            padding: EdgeInsets.all(10),
            child: Row(
              children: [
                Expanded(
                    child: Container(
                  width: double.infinity,
                  height: double.infinity,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        bottomLeft: Radius.circular(10)),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "浏览量",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Color(0xff969696)),
                      ),
                      Text(
                        "312.00",
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.bold),
                      )
                    ],
                  ),
                )),
                Container(
                  width: 1,
                  height: 40,
                  color: Color(0xfff1f1f1),
                ),
                Expanded(
                    child: Container(
                  width: double.infinity,
                  height: double.infinity,
                  color: Colors.white,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "订单成交量",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Color(0xff969696)),
                      ),
                      Text("31200",
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold))
                    ],
                  ),
                )),
                Container(
                  width: 1,
                  height: 40,
                  color: Color(0xfff1f1f1),
                ),
                Expanded(
                    child: Container(
                  width: double.infinity,
                  height: double.infinity,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topRight: Radius.circular(10),
                        bottomRight: Radius.circular(10)),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "成交金额",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Color(0xff969696)),
                      ),
                      Text("312W",
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold))
                    ],
                  ),
                ))
              ],
            ),
          ),
          SizedBox(
            height: 8,
          ),
          Expanded(
              child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.transparent,
            padding: EdgeInsets.only(left: 10, right: 10),
            child: Column(
              children: [
                Container(
                  width: double.infinity,
                  height: 60,
                  color: Colors.white,
                  child: Row(
                    children: [
                      ...controller.state.pageList.value
                          .asMap()
                          .keys
                          .map((index) {
                        return Expanded(
                            child: GestureDetector(
                          onTap: () {
                            controller.state.activePage.value = index;
                          },
                          child: Container(
                            width: double.infinity,
                            height: double.infinity,
                            color: Colors.transparent,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  showText(controller
                                      .state.pageList.value[index]["name"]),
                                  style: TextStyle(
                                      color:
                                          controller.state.activePage.value ==
                                                  index
                                              ? activeColor
                                              : defaultColor,
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold),
                                ),
                                SizedBox(
                                  height: 5,
                                ),
                                Container(
                                  width: double.infinity,
                                  height: 10,
                                  alignment: Alignment.center,
                                  child: Visibility(
                                      visible:
                                          controller.state.activePage.value ==
                                              index,
                                      child: buildImage(
                                          url: "assets/images/common/flag.png",
                                          fit: BoxFit.fitHeight)),
                                  color: Colors.transparent,
                                )
                              ],
                            ),
                          ),
                        ));
                      }).toList(),
                    ],
                  ),
                ),
                Expanded(
                    child: Container(
                  width: double.infinity,
                  height: double.infinity,
                  child: SingleChildScrollView(
                    child: Column(
                      children: [buildCard()],
                    ),
                  ),
                ))
              ],
            ),
          )),
          Container(
            width: double.infinity,
            height: screenBottomHeight,
          )
        ])));
  }

  Widget buildCard() {
    return Container(
      width: double.infinity,
      height: 110,
      color: Colors.white,
      child: Row(
        children: [
          Container(
            width: 110,
            height: double.infinity,
            color: Colors.red,
          ),
          Expanded(
              child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.white,
            padding: EdgeInsets.all(4),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "用户1231",
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style:
                          TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "专业机械滚轴 1231231211121234141412",
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style:
                          TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
                Text(
                  "浏览量 12312312",
                  style: TextStyle(fontSize: 13, color: Color(0xffcdcdcd)),
                )
              ],
            ),
          ))
        ],
      ),
    );
  }
}
